<template>
  <div class="my-wrap">
    <div class="swiper-container" ref="mySwiper1">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          :style="'background-color:' + colorList[index]"
          v-for="(item, index) in colorList"
          :key="'mySwiper1' + index"
        >
          Slide {{ index + 1 }}
        </div>
      </div>

      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>

      <!-- 如果需要滚 动条 -->
      <div class="swiper-scrollbar"></div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination-wrap">
      <div class="swiper-pagination"></div>
    </div>

    <div @click="btn()" style="color: #333; cursor: pointer">
      删除其中轮播
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
// import "swiper/css/swiper.css";
var count = 10000;
export default {
  data() {
    return {
      colorList: [
        "#60807D",
        "#A3AAB0",
        "#CEAB21",
        "#59B0E6",
        "#284EB6",
        "#A877C6",
        "#78439F",
        "#8D4581",
        "#502E30"
      ],
      swiperOptions: {},
      activeIndex: 5,
      direction: 1
    };
  },
  methods: {
    btn(index = Math.floor(this.colorList.length * Math.random()) + 1) {
      this.colorList.splice(index, 1);
    }
  },
  mounted() {
    var that = this;

    this.$nextTick(function() {
      // mySwiper1

      new Swiper(".swiper-container", {
        // autoplay:{
        //     stopOnlastSide: true,
        // },

        // autoplay: true,
        speed: 500,
        centeredSlides: true,
        initialSlide: that.activeIndex,
        centeredSlidesBounds: true,
        // loop: true,
        height: 50,
        // autoplayDisableOnInteraction: , //用户操作swiper之后，是否禁止autoplay loop: true,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swipe
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          renderBullet: function(index, className) {
            console.log(index, className);

            return `<span class=" ${className}" style="background-color:${
              that.colorList[index]
            }" >${index + 1}</span>`;
          }
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        },
        scrollbar: {
          el: ".swiper-scrollbar"
        },
        on: {
          slideChange: function() {
            console.log("this.activeIndexthis.activeIndex", this.activeIndex);
            if (that.activeIndex > this.activeIndex) {
              console.log("方向:左");
              that.direction = -1;
            } else {
              console.log("方向:右");
              that.direction = 1;
            }
            that.activeIndex = this.activeIndex;

            // updateNavPosition()
            console.log("count", ++count);
            setTimeout(() => {
              updateNavPosition();
            });

            // throttle(updateNavPosition)()
          },
          observerUpdate: function() {
            console.log("监测到DOM变化，更新Swiper");
            console.log("count", ++count);
            setTimeout(() => {
              updateNavPosition();
            });
          }
        }
      });

      console.log(wrapWidth, scrollWidth, itemWidth);
      var wrapEl;
      var paginaterEl;
      var wrapWidth;
      var scrollWidth;
      var itemWidth;
      var sectionRange;
      var timer = null;
      var flag = true;
      init();
      function updateNavPosition() {
        // 如果不在区间
        if (!isSection(that.activeIndex)) {
          // console.log(index,getTranslateX(paginaterEl),scrollWidth,rightEndIndex);
          if (that.direction > 0) {
            console.log("右");
            // 向右滚动
            // var translateX = (that.activeIndex-(wrapWidth/itemWidth-1))<=0?0:(that.activeIndex-(wrapWidth/itemWidth-1))*itemWidth
            var translateX =
              (that.activeIndex - (wrapWidth / itemWidth - 1)) * itemWidth;
          } else {
            console.log(
              "左",
              that.activeIndex + wrapWidth / itemWidth <= that.colorList.length
            );
            // var translateX = that.activeIndex*itemWidth
            var translateX =
              that.activeIndex + wrapWidth / itemWidth <= that.colorList.length
                ? that.activeIndex * itemWidth
                : that.activeIndex - (wrapWidth / itemWidth - 1) > 0
                ? (that.activeIndex - (wrapWidth / itemWidth - 1)) * itemWidth
                : 0;
          }
          console.log("偏移:", translateX);
          // paginaterEl.style.transform = `translate3d(-${translateX}px, 0, 0);`
          // paginaterEl.style.color="#fff"
          if (translateX < 0) {
            translateX = 0;
          }
          paginaterEl.style.transform = `translateX(-${translateX}px)`;
          // getTranslateX(paginaterEl)
        }
      }
      function getTranslateX(myElement) {
        var style = window.getComputedStyle(myElement);
        // var matrix = new WebKitCSSMatrix(style.webkitTransform);
        var matrix = new WebKitCSSMatrix(style.transform);
        // console.log('translateX: ', matrix.m41);
        return matrix.m41;
      }
      function isSection(index) {
        init();
        var leftStartIndex = Math.ceil(
          Math.abs(getTranslateX(paginaterEl) / itemWidth)
        ); //起始索引
        var rightEndIndex = leftStartIndex + sectionRange; //结束索引
        // 如果操作了轮播数量 滚动的距离大于可滚动的范围就 就直接进行滚动操作
        console.log("123", leftStartIndex, sectionRange);
        if (leftStartIndex + sectionRange >= that.colorList.length - 1) {
          return false;
        }
        console.log(leftStartIndex, rightEndIndex);
        return index >= leftStartIndex && index <= rightEndIndex;
      }
      function init() {
        wrapEl = wrapEl || document.querySelector(".swiper-pagination-wrap");
        paginaterEl =
          paginaterEl || document.querySelector(".swiper-pagination");
        wrapWidth = wrapWidth || wrapEl.clientWidth; // 容器宽度
        scrollWidth = paginaterEl.clientWidth || wrapEl.scrollWidth; // 可滚动宽度
        console.log(scrollWidth);
        itemWidth = itemWidth || scrollWidth / that.colorList.length; //单项宽度
        sectionRange = sectionRange || Math.floor(wrapWidth / itemWidth) - 1; //区间范围
      }
      //节流函数
      function throttle(fn, delay = 0) {
        return function() {
          if (!timer) {
            timer = setTimeout(() => {
              fn.call(that);

              timer = null;
            }, delay);
          }
        };
      }
    });
  }
};
</script>

<style lang="less" scoped>
.my-wrap {
  width: 640px;
  margin: 0 auto;
  margin-top: 100px;
  position: relative;
  // color: #333;

  .swiper-container {
    width: 640px;
    height: 200px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;

    .swiper-wrapper {
      // width:5760px;
      height: 100%;
      // display: flex;
      .swiper-slide {
        display: inline-block;
        width: 640px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  .swiper-pagination-wrap {
    width: 100%;
    overflow: hidden;
    height: 50px;
    margin-top: 24px;
    position: relative;

    /deep/.swiper-pagination {
      display: flex;
      transition: 500ms all;
      // width: 1440px;
      .swiper-pagination-bullet {
        position: relative;
        display: inline-block;
        background: transparent;
        border-radius: 6px;

        width: 140px;
        height: 50px;
        line-height: 50px;
        opacity: 0.2;
      }
      .swiper-pagination-bullet-active {
        opacity: 1;
      }
    }
    /deep/.swiper-scrollbar {
      background: transparent;
      .swiper-scrollbar-drag {
        background: transparent;
      }
    }
  }
}

.swiper-container {
  // --swiper-theme-color: #ff6600;

  // --swiper-navigation-color: #00ff33;/* 单独设置按钮颜色 */
  // --swiper-navigation-size: 30px;/* 设置按钮大小 */
  // --swiper-pagination-color: #00ff33;/* 两种都可以 */
  // --swiper-pagination-color:transparent;
}
</style>
